<template>
    <div class="chaos-registry-middle">
        <el-divider><span style="font-size:38px;">注册</span></el-divider>
        <div style="width:400px;height:470px;margin:80px auto">
            <el-form :model="registerForm" :rules="registerRules" ref="registerForm" status-icon label-width="100px">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="registerForm.account"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="registerForm.password"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="rePassword">
                    <el-input v-model="registerForm.rePassword"></el-input>
                </el-form-item>

                <el-form-item label="手机号码">
                    <el-input v-model="registerForm.mobile" disabled></el-input>
                </el-form-item>

                <el-form-item label="手机验证码">
                    <el-row>
                        <el-col :span="12"><el-input v-model="registerForm.identifyCode" disabled></el-input></el-col>
                        <el-col :span="12"><el-button plain style="float:right;width:calc(100% - 10px)" disabled>发送验证码</el-button></el-col>
                    </el-row>
                </el-form-item>

                <el-form-item>
                    <el-checkbox v-model="userChecked"></el-checkbox>
                    <span style="margin-left:5px;color:#000000">我已阅读且同意</span>
                    <a href="" style="color:#00A1D6">《chaos网用户使用协议》</a>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width:100%" :disabled="!userChecked" @click="doRegistry" :loading="registerLoading">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'chaosRegistryMiddle',
        data () {
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.registerForm.rePassword !== '') {
                        this.$refs.registerForm.validateField('rePassword');
                    }
                    callback();
                }
            };
            var validateRePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                registerForm:{
                    account:"",
                    password:"",
                    rePassword:"",
                    mobile:"",
                    identifyCode:""
                },
                //用户勾选了userChecked选择框后才会开启注册按钮
                userChecked:false,
                registerLoading:false,
                //校验规则
                registerRules:{
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 6, max: 16, message: '账号的长度在 6 到 16 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true,validator: validatePassword, trigger: 'blur' },
                        { min: 6, max: 12, message: '密码的长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                    rePassword: [
                        { required: true,validator: validateRePassword, trigger: 'blur' },
                    ],
                }
            }
        },
        methods:{
            doRegistry(){
                var self = this;

                var validResult = false;

                self.$refs['registerForm'].validate((valid) => {
                    if (valid) {
                        validResult = true;
                        return;
                    } else {
                        validResult = false;
                        return;
                    }
                });

                if(validResult){
                    self.registerLoading = true;
                    //校验通过后提交数据到后台数据库
                    self.$api.post('pdm-service/registerController/register', self.registerForm, r => {
                        //注册成功，执行跳转逻辑!
                        self.registerLoading = false;
                        console.log(r)
                    })
                }

                // if(!validResult){
                //     alert("校验不通过")
                // }
            }

        }

    }
</script>

<style scoped>
    .chaos-registry-middle{
        width:999px;
        min-height:550px;
        margin:auto auto;
    }

    .valid-success{
        border: 1px solid red;
    }

</style>
